<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@include file="/WEB-INF/base.jspf"%>
<style>
 #test1 {
	 margin: 2px;  
	 height: 37px;
}

#test2 {
	margin: 2px;
	height: 37px;
}
	.modal-dialog {
		max-width: 1000px;
	}
#qblx {
	margin: 2px;
	height: 37px;
}

#zflx {
	margin: 2px;
	height: 37px;
}

.layui-inline {
	height: 100px;
}

#hymc {
	margin: 2px;
	height: 37px;
}
table th,table tr,table td {
text-align: center;
vertical-align:middle;
}
.hidden-td {
	display:none;
}
	.input-c-lotterNumber {
		width:750px;
		height:50px;
		margin-right:12px;
		margin-bottom:12px;
		font-size:22px;
		font-weight:bold;
	}   
</style>
		  <div>
			<div  style="margin-bottom:10px;display:flex;justify-content:flex-end;">
				<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#shengxiaoModal">一键更换生肖属性</button>
			</div>
			<div>
				<table id="table-i-dailiList"  class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th style="display:none;"></th>
							<th>属性名</th>
							<th>号码</th>
							<th>修改时间</th>
							<th>操作</th>
							<th style="display:none;">操作</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>

		</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="shengxiaoModal" tabindex="-1" role="dialog" aria-labelledby="shengxiaoModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">更新生肖属性</h4>
            </div>
            <div class="modal-body">是否确定要更换生肖属性</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="button-i-submitShengXiaoBtn">确认</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->


<div class="modal fade" id="updAndEditModal" tabindex="-1" role="dialog" aria-labelledby="updAndEditModal" aria-hidden="true">
	<div class="modal-dialog" style="width:760px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">新增/修改</h4>
			</div>
			<div class="modal-body">
			<input id="input-i-id" hidden="hidden" class="input-auto" />
			<input id="input-i-attrname" hidden="hidden" class="input-auto" />
			<form>
			<p style="font-size:14px;font-weight:bold;color:red;" class="p-i-noticeText">占位符</p>
             <span>开奖号码：</span>
             <p id="p-i-lotterNumWrapper" class="p-c-flexwrapper" style="display:flex;align-items:center;flex-wrap:wrap;">
            	</p> 
			</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" id="button-i-addNewQQNumber2">提交更改</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="noticeModal" aria-hidden="true">
    <div class="modal-dialog class-fake-alert">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ></div>
            <div class="modal-footer">	      
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>   	


<script type="text/javascript" src="/js/zhengzeTools.js"></script>
<script type="text/javascript" src="/js/caizhongyusheLotterHelper.js"></script>
	<script>
	var SHUXING_OBJ = {
			"金": 10,
			"木": 11,
			"水": 10,
			"火": 10,
			"土": 8,
	}
	$("#table-i-dailiList").DataTable({
	      "bLengthChange": true,      
	      "bAutoWidth": false,
	      "bSort": false,
	      "dom": "t<'tableinfo'i<'tableSearch'p>l>",
	      'aLengthMenu':[10, 20],
	       //"order": [[ 9, "asc" ]],  
	       "searching": true,  	       
	       "language": {//语言设置  
	            "lengthMenu": "每页显示 _MENU_ 条记录",     
	            "zeroRecords": "没有检索到数据",     
	            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
	            "info": "没有数据",     
	            "oPaginate": {     
	                "sFirst": "首页",     
	                "sPrevious": "前一页",     
	                "sNext": "后一页",     
	                "sLast": "尾页"    
	          	},
	            "search":"搜索:",
	            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
	            "infoEmpty":      "没有找到匹配的信息",
	         },  
	         "ajax": {
	        	 "type": "POST",
	        	 "url": "/czgl/findHongKongLotteryAttribute.do",
	        	 "dataSrc": function(json) {
	        		 var newData = json.data
	        		 for (var i = 0; i < newData.length; i++) {
	        			 var item = newData[i]
	        			 if (SHUXING_OBJ[item.attribute]) {
	        				var newContent = []
	        				var oldContent = item.content.split(",")
	        				var fivtyNum = 0
	        				for (var j = 0; j < oldContent.length; j++) {
	        					var oldItem = oldContent[j]
	        					if (oldItem && oldItem !== "50") {
	        						newContent.push(oldItem)
	        					}
	        					else if (oldItem === "50") {
	        						fivtyNum += 1
	        					}
	        				}
	        				item.newContent = newContent.join(",")
	        				item.fiveNum = fivtyNum
	        				item.editBtn = "<button class='btn btn-warning btn-c-editBankInfo btn-sm'>修改</button>"
	        			 } else {
	        				 item.fiveNum = ""
        					 item.editBtn = ""
        					 item.newContent = item.content.replace(new RegExp("50,","gm"), "")
	        			 }
	        		 }
	        		 return newData
	        	 }
	         },
	         "columns": [
						 {"data": "id", "className": "hidden-td id-edit-td"},
	                     {"data": "attribute", "className": "attribute-edit-td"},
	                     {"data": "newContent", "className": "newContent-edit-td"},
	                     {"data": "updateTime", "className": "updateTime-edit-td"},
	                     {"data": "editBtn"},
	                     {"data": "fiveNum", "className": "fiveNum-edit-td hidden-td"},
	                 ]   	         
	    })
	    insertSearchBtn()
	    
	    var numZhengZe = /^[0-9]+$/

function lotterInputListenered(node) {
	var $noticeTextP = $(node).find(".p-i-noticeText")
	$(node).on("input", ".input-c-lotterNumber", function(e) {
    	var flag = true
		var specialValue = $(e.currentTarget).val()
		var tempArr = specialValue.split(",");
    	
    	for(i=0;i<tempArr.length;i++){
    		for(j=i+1;j<tempArr.length;j++){
    			if(tempArr[i]==tempArr[j]){
    				$noticeTextP.addClass("active").text("不能存在相同的开奖号码")
                    flag = false
    			}
    		}
    		if (!numZhengZe.test(tempArr[i])) {
    			$noticeTextP.addClass("active").text("无效的开奖数字")
				flag = false
    		}
    		
    		if(tempArr[i]==""){
    			$noticeTextP.removeClass("active")
				return
    		}
    		
    		if(tempArr[i]>49 || tempArr[i]<1){
    			$noticeTextP.addClass("active").text("开奖号码在1到49之间，请重新输入")
				flag = false
    		}
    		
    		if(tempArr[i].length!=2){
    			$noticeTextP.addClass("active").text("当前彩种开奖号码格式为2位数，如 00")
				flag = false
    		}
    		
    		if (flag) {
        		$noticeTextP.removeClass("active")
        	} else {
        		$noticeTextP.addClass("active")
        	}
    	}
	})	
}
	    
function mixLooterNumber(node) {
	var result = ""
	$(node).each(function(index, element) {
		result += element.value + ","
	})
	return result
}	    
	    function createEmptyLotter(node) {
			var html = "<input maxlength='80' class='form-control input-c-lotterNumber' required />";
			$(node).html(html);
		}	
    var ROLEOBJ = {
	    	max: 49,
	    	min: 1,
	    }	    
	
	    $("#table-i-dailiList").on("click", ".btn-c-editBankInfo", function(event) {
	    	var $tr = $(event.currentTarget).closest("tr")
	    	var attrName = $tr.find(".attribute-edit-td").text()
	    	createEmptyLotter("#p-i-lotterNumWrapper")
	    	var numArr = $tr.find(".newContent-edit-td").text()+",";
	    	$("#p-i-lotterNumWrapper .input-c-lotterNumber").val(numArr);
	    	$("#updAndEditModal").attr("data-fivenum", $tr.find(".fiveNum-edit-td").text())
	    	$("#input-i-id").val($tr.find(".id-edit-td").text())
	    	$("#input-i-attrname").val($tr.find(".attribute-edit-td").text())
	    	$("#updAndEditModal").modal("show")
	    })
	   lotterInputListenered("#updAndEditModal")
			var obj = {
				btnName: "#button-i-addNewQQNumber2",
				divName: "#updAndEditModal",
				callback: function() {
					if ($(".p-i-noticeText").hasClass("active")) {
						return "当前存在错误号码"
					}
					return "ok"
				}
			}
	
			checkFormMethod(obj, function() {
				 var result = mixLooterNumber("#p-i-lotterNumWrapper .input-c-lotterNumber")
				 var resultlen = result.split(",");
				 var number=50;
				 var count=number-resultlen.length;
				 for(i=0;i<count;i++){
					 result+="50,"
				 }
				  result=result.substring(0,result.length-1)
				
				 
				 var newRequest = {
					url: "/czgl/updateElementsAttribute.do",
					type: "post",
					data: {
						attribute: $("#input-i-attrname").val(),
						id: $("#input-i-id").val(),
						content: result,
					},
					success: function(data) {
						var newData = JSON.parse(data)
						showNoticeModal("操作成功！")
						$('#updAndEditModal').modal("hide")
						var table = $("#table-i-dailiList").DataTable()
						table.ajax.reload()
					},
					error: function(status) {
					}
				}
				ajax(newRequest)
			})		    
	    $("#button-i-submitShengXiaoBtn").on("click", function(e) {
			 var newRequest = {
				url: "/czgl/updateZodiacAttribute.do",
				type: "post",
				data: {},
				success: function(data) {
					var newData = JSON.parse(data)
					if (newData.data !== 12) {
						showNoticeModal("替换失败！")
						return
					}
					showNoticeModal("替换成功！")
					$('#shengxiaoModal').modal("hide")
					var table = $("#table-i-dailiList").DataTable()
					table.ajax.reload()
				},
				error: function(status) {
				}
			}
			ajax(newRequest)	    	
	    })
	
	</script>
